<template>
<div class="supplier-list">
    <Form :model="formItem" ref="formItem" :inline="true" action="javascript:void(0)">
        <FormItem>
            <Input v-model="formItem.key" placeholder="输入关键词查找..."></Input>
        </FormItem>
        <FormItem>
            <Button type="primary" @click="renderTable('formItem')">查找</Button>
        </FormItem>
    </Form>
    <div class="action-btn">
        <Button size="small" @click="deleteData" style="margin-right: 8px" type="error">批量删除</Button>
        <Button size="small" @click="showModel" type="success">添加供应商</Button>
    </div>
    <Table border ref="adlist" :columns="list" :data="tablelist" :loading="dataloading" @on-selection-change="changeData">
        <template slot-scope="{ row }" slot="address">
            {{ row.province }}{{ row.city }}{{ row.district }}{{ row.detail }}
        </template>
        <template slot-scope="{ row }" slot="status">
            <Tag color="green" v-if="row.status">正常</Tag>
            <Tag color="volcano" v-if="row.status == false">关闭</Tag>
        </template>
        <template slot-scope="{ row, index }" slot="action">
            <Button type="primary" size="small" style="margin-right: 5px;float:left" @click="showStaff(row.id)">员工</Button>
            <Button type="info" size="small" style="margin-right: 5px;float:left" @click="showEditSupplier(row.id)">编辑</Button>
            <Button type="error" size="small" @click="remove(index,row.id)">删除</Button>
        </template>
    </Table>
    <!-- 分页 -->
    <div class="table-page">
        <Page size="small" ref="listPage" :total="pages.total" :current="pages.current" :page-size="pages.size" show-elevator show-total @on-change="changePage"></Page>
    </div>
    <!-- 添加的弹出 -->
    <!-- 需要全屏时添加这句 :mask="false" class-name="idw100" -->
    <Drawer :closable="false" :mask-closable="false" :scrollable="true" title="添加供应商" width="640" v-model="showModalStatus">
        <Spin size="large" fix v-if="loading"></Spin>
        <Form :model="supplier" ref="supplierValidate" label-position="right" :label-width="80" :rules="supplierValidate" action="javascript:void(0)">
            <FormItem label="名称" prop="suppliername">
                <Input v-model="supplier.suppliername" placeholder="输入名称..."></Input>
            </FormItem>
            <FormItem label="退货地址id" prop="refund_address_id">
                <Input v-model="supplier.refund_address_id" placeholder="输入退货地址id..."></Input>
            </FormItem>
            <FormItem label="发件人姓名" prop="name">
                <Input v-model="supplier.name" placeholder="输入发件人姓名..."></Input>
            </FormItem>
            <FormItem label="手机号" prop="phone">
                <Input v-model="supplier.phone" placeholder="输入手机号..."></Input>
            </FormItem>
            <FormItem label="省" prop="province">
                <Input v-model="supplier.province" placeholder="输入省..."></Input>
            </FormItem>
            <FormItem label="市" prop="city">
                <Input v-model="supplier.city" placeholder="输入市..."></Input>
            </FormItem>
            <FormItem label="区" prop="district">
                <Input v-model="supplier.district" placeholder="输入区..."></Input>
            </FormItem>
            <FormItem label="街道" prop="detail">
                <Input v-model="supplier.detail" placeholder="输入街道..."></Input>
            </FormItem>
            <FormItem label="状态">
                <i-switch v-model="supplier.status">
                    <span slot="on">正常</span>
                    <span slot="off">禁用</span>
                </i-switch>
            </FormItem>
            <FormItem>
                <Button style="margin-right: 8px" @click="showModalStatus = false">取消</Button>
                <Button type="primary" @click="createSupplier('supplierValidate')">提交</Button>
            </FormItem>
        </Form>
    </Drawer>
    <!-- 修改的弹出 -->
    <Drawer :closable="false" :mask-closable="false" :scrollable="true" title="修改供应商" width="640" v-model="showEditModalStatus">
        <Spin size="large" fix v-if="loading"></Spin>
        <Form :model="supplier" ref="supplierValidate" label-position="right" :label-width="80" :rules="supplierValidate" action="javascript:void(0)">
            <FormItem label="名称" prop="suppliername">
                <Input v-model="supplier.suppliername" placeholder="输入名称..."></Input>
            </FormItem>
            <FormItem label="退货地址id" prop="refund_address_id">
                <Input v-model="supplier.refund_address_id" placeholder="输入退货地址id..."></Input>
            </FormItem>
            <FormItem label="发件人姓名" prop="name">
                <Input v-model="supplier.name" placeholder="输入发件人姓名..."></Input>
            </FormItem>
            <FormItem label="手机号" prop="phone">
                <Input v-model="supplier.phone" placeholder="输入手机号..."></Input>
            </FormItem>
            <FormItem label="省" prop="province">
                <Input v-model="supplier.province" placeholder="输入省..."></Input>
            </FormItem>
            <FormItem label="市" prop="city">
                <Input v-model="supplier.city" placeholder="输入市..."></Input>
            </FormItem>
            <FormItem label="区" prop="district">
                <Input v-model="supplier.district" placeholder="输入区..."></Input>
            </FormItem>
            <FormItem label="街道" prop="detail">
                <Input v-model="supplier.detail" placeholder="输入街道..."></Input>
            </FormItem>
            <FormItem label="状态">
                <i-switch v-model="supplier.status">
                    <span slot="on">正常</span>
                    <span slot="off">禁用</span>
                </i-switch>
            </FormItem>
            <FormItem>
                <Button style="margin-right: 8px" @click="showEditModalStatus = false">取消</Button>
                <Button type="primary" @click="editSupplier('supplierValidate')">提交</Button>
            </FormItem>
        </Form>
    </Drawer>
    <!-- 员工的弹出 -->
    <Drawer :closable="false" :mask-closable="true" :scrollable="true" title="员工列表" width="840" v-model="showStaffModalStatus">
        <div class="action-btn">
            <Button size="small" @click="showStaffCreateModel" type="success">添加员工</Button>
        </div>
        <Table border ref="stafflist" :columns="stafflist" :data="tableStafflist" :loading="staffloading">
            <template slot-scope="{ row }" slot="status">
                <Tag color="green" v-if="row.status">正常</Tag>
                <Tag color="volcano" v-if="row.status == false">关闭</Tag>
            </template>
            <template slot-scope="{ row,index }" slot="action">
                <Button type="success" size="small" style="margin-right: 5px;float:left" @click="showRelationModel(row.id)">关联</Button>
                <Button type="info" size="small" style="margin-right: 5px;float:left" @click="showStaffEditModel(row.id)">编辑</Button>
                <Button type="error" size="small" @click="removeStaff(index,row.id)">删除</Button>
            </template>
        </Table>
    </Drawer>
    <!-- 添加员工 -->
    <Drawer :closable="false" :mask-closable="false" :scrollable="true" title="添加员工" width="640" v-model="showStaffCreateStatus">
        <Spin size="large" fix v-if="loading"></Spin>
        <Form :model="supplierstaff" ref="supplierStaffValidate" label-position="right" :label-width="80" :rules="supplierStaffValidate" action="javascript:void(0)">
            <FormItem label="姓名" prop="staffname">
                <Input v-model="supplierstaff.staffname" placeholder="输入姓名..."></Input>
            </FormItem>
            <FormItem label="手机号">
                <Input v-model="supplierstaff.phone" placeholder="输入手机号..."></Input>
            </FormItem>
            <FormItem label="邮箱">
                <Input v-model="supplierstaff.email" placeholder="输入邮箱..."></Input>
            </FormItem>
            <FormItem label="密码" prop="password">
                <Input v-model="supplierstaff.password" type="password" placeholder="输入密码..."></Input>
            </FormItem>
            <FormItem label="确认密码">
                <Input v-model="supplierstaff.password_confirmation" type="password" placeholder="确认密码..."></Input>
            </FormItem>
            <FormItem>
                <Button style="margin-right: 8px" @click="showStaffCreateStatus = false">取消</Button>
                <Button type="primary" @click="createSupplierStaff('supplierStaffValidate')">提交</Button>
            </FormItem>
        </Form>
    </Drawer>
    <!-- 修改员工 -->
    <Drawer :closable="false" :mask-closable="false" :scrollable="true" title="修改员工" width="640" v-model="showStaffEditStatus">
        <Spin size="large" fix v-if="loading"></Spin>
        <Form :model="supplierstaff" ref="supplierStaffEditValidate" label-position="right" :label-width="80" :rules="supplierStaffEditValidate" action="javascript:void(0)">
            <FormItem label="姓名" prop="staffname">
                <Input v-model="supplierstaff.staffname" placeholder="输入姓名..."></Input>
            </FormItem>
            <FormItem label="手机号">
                <Input v-model="supplierstaff.phone" placeholder="输入手机号..."></Input>
            </FormItem>
            <FormItem label="邮箱">
                <Input v-model="supplierstaff.email" placeholder="输入邮箱..."></Input>
            </FormItem>
            <FormItem label="密码" prop="password">
                <Input v-model="supplierstaff.password" type="password" placeholder="输入密码..."></Input>
            </FormItem>
            <FormItem label="确认密码">
                <Input v-model="supplierstaff.password_confirmation" type="password" placeholder="确认密码..."></Input>
            </FormItem>
            <FormItem>
                <Button style="margin-right: 8px" @click="showStaffEditStatus = false">取消</Button>
                <Button type="primary" @click="editSupplierStaff('supplierStaffEditValidate')">提交</Button>
            </FormItem>
        </Form>
    </Drawer>
    <!-- 关联租户 -->
    <Drawer :closable="false" :mask-closable="false" :scrollable="true" title="关联租户" width="640" v-model="showRelationStatus">
        <Spin size="large" fix v-if="loading"></Spin>
        <Form :model="stafftenant" ref="levelValidate" label-position="right" action="javascript:void(0)">
            <FormItem label="租户" prop="tenant_id">
                <Select v-model="stafftenant.tenant_id" multiple clearable filterable aria-placeholder="租户">
                    <Option v-for="item in tenantlist" :value="item.id" :key="item.id">{{ item.tenant_name }}</Option>
                </Select>
            </FormItem>
            <FormItem>
                <Button style="margin-right: 8px" @click="showRelationStatus = false">取消</Button>
                <Button type="primary" @click="relationTenant()">提交</Button>
            </FormItem>
        </Form>
    </Drawer>
</div>
</template>

<script>
export default {
    name: 'Supplier',
    data() {
        return {
            supplier_id:0,
            loading: false,
            dataloading: true,
            staffloading:true,
            formItem: {
                'key': ''
            },
            pages: {
                current: 1,
                total: 0,
                size: 10
            },
            list: [
                {
                    type: 'selection',
                    width: 60,
                    align: 'center',
                },
                {
                    title: 'Id',
                    key: 'id',
                    width: 60,
                },
                {
                    title: '名称',
                    minWidth: 200,
                    key: 'suppliername',
                },
                {
                    title: '姓名',
                    width: 100,
                    key: 'name',
                },
                {
                    title: '退货地址',
                    width: 100,
                    key: 'refund_address_id',
                },
                {
                    title: '电话',
                    width: 150,
                    key: 'phone',
                },
                {
                    title: '地址',
                    width: 320,
                    slot: 'address',
                },
                {
                    title: '状态',
                    slot: 'status',
                    width: 90
                },
                {
                    title: '操作',
                    slot: 'action',
                    width: 180
                }
            ],
            tablelist: [],
            stafflist: [
                {
                    title: '手机号',
                    key: 'phone',
                    width: 150,
                },
                {
                    title: '姓名',
                    minWidth: 200,
                    key: 'staffname',
                },
                {
                    title: '邮箱',
                    key: 'email',
                    width: 180,
                },
                {
                    title: '状态',
                    slot: 'status',
                    width: 90
                },
                {
                    title: '操作',
                    slot: 'action',
                    width: 220
                }
            ],
            tableStafflist: [],
            supplier: {
                suppliername: '',
                refund_address_id:'',
                name: '',
                phone: '',
                province: '',
                city: '',
                district: '',
                detail: '',
                status: true
            },
            supplierstaff_id: 0,
            supplierstaff: {
                supplier_id: 0,
                staffname:'',
                phone:'',
                email:'',
                crypt:'',
                password:'',
                password_confirmation: '',
                status: true
            },
            showModalStatus: false,
            showEditModalStatus:false,
            showStaffModalStatus:false,
            showStaffCreateStatus:false,
            showStaffEditStatus:false,
            showRelationStatus:false,
            supplierValidate: {
                type: [
                    { required: true, type: 'integer', message: '类型必须填写', trigger: 'change' }
                ],
                suppliername: [
                    { required: true, message: '名称必须填写', trigger: 'blur' }
                ]
            },
            supplierStaffValidate: {
                staffname: [
                    { required: true, message: '姓名必须填写', trigger: 'blur' },
                    { type: 'string', min: 2, max: 15, message: '姓名 3 - 15 位长度', trigger: 'blur' }
                ],
                password: [
                    { required: true, message: '密码必须填写', trigger: 'blur' },
                    { type: 'string', min: 6, max: 15, message: '密码 6 - 15 位长度', trigger: 'blur' }
                ]
            },
            supplierStaffEditValidate: {
                staffname: [
                    { required: true, message: '姓名必须填写', trigger: 'blur' },
                    { type: 'string', min: 2, max: 15, message: '姓名 3 - 15 位长度', trigger: 'blur' }
                ]
            },
            tenantlist:[],
            stafftenant:{
                supplier_staff_id:0,
                tenant_id:[],
            },
        }
    },
    created: function() {
        // 取数据
        this.getTableList();
    },
    // 组件
    components: {
    },
    methods: {
        changePage() {
            this.pages.current = this.$refs['listPage'].currentPage;
            this.getTableList();
        },
        // 选择id
        changeData: function(index) {
            this.selectData = index
        },
        getTableList: function() {
            var params = { page: this.pages.current,'size':this.pages.size};
            this.$api.supplier.list(params).then(res => {
                this.dataloading = false;
                if (res.code == 200) {
                    this.tablelist = res.result.list;
                    this.pages.total = res.result.total
                    this.$Message.success(res.message);
                }
            });
            return;
        },
        // 展开添加
        showModel() {
            this.showModalStatus = !this.showModalStatus;
            this.supplier = {
                suppliername: '',
                name: '',
                phone: '',
                province: '',
                city: '',
                district: '',
                detail: '',
                status: true
            };
        },
        // 添加
        createSupplier(name) {
            this.$refs[name].validate((valid) => {
                if (valid) {
                    this.loading = true;
                    this.$api.supplier.create(this.supplier).then(res => {
                        if (res.code == 200) {
                            this.getTableList();
                            this.showModalStatus = !this.showModalStatus;
                        }
                        this.loading = false;
                    }).finally(res => {
                        this.loading = false;
                    });
                } else {
                    this.$Message.error('请检查输入的信息是否正确！');
                    this.loading = false
                }
            })
        },
        showEditSupplier:function(id){
            this.supplier_id = id;
            this.loading = true;
            this.$api.supplier.detail({supplier_id:id}).then(res => {
                if (res.code == 200) {
                    this.supplier = res.result
                    this.loading = false;
                }
            })
            this.showEditModalStatus = !this.showEditModalStatus;
        },
        editSupplier:function(name){
            this.$refs[name].validate((valid) => {
                if (valid) {
                    this.loading = true;
                    this.supplier.supplier_id = this.supplier_id
                    this.$api.supplier.edit(this.supplier).then(res => {
                        if (res.code == 200) {
                            this.getTableList();
                            this.showEditModalStatus = !this.showEditModalStatus;
                        }
                        this.loading = false;
                    }).finally(res => {
                        this.loading = false;
                    });
                } else {
                    this.$Message.error('请检查输入的信息是否正确！');
                    this.loading = false
                }
            })
        },
        // 删除
        remove: function(index, id) {
            // 弹出确认框
            this.$Modal.confirm({
                title: '警告',
                content: '<p>此操作不可恢复，三思而后行...</p>',
                onOk: () => {
                this.$api.supplier.remove({ supplier_id: [id] }).then(res => {
                    if (res.code == 200) {
                    this.$Message.success(res.message);
                    this.tablelist.splice(index, 1);
                    }
                });
                }
            });
        },
        // 筛选
        renderTable: function(name) {
            this.dataloading = true;
            this.pages.currentPage = 1;
            var ps = { 'key': this.formItem.key,'page':1 ,size:this.pages.size};
            this.$api.supplier.list(ps).then(res => {
                this.dataloading = false;
                if (res.code == 200) {
                    this.tablelist = res.result.list;
                    this.pages.total = res.result.total
                    this.$Message.success(res.message);
                }
            });
            return;
        },
        // 批量删除
        deleteData: function() {
            // 弹出确认框
            this.$Modal.confirm({
                title: '警告',
                content: '<p>此操作不可恢复，三思而后行...</p>',
                onOk: () => {
                    var ids = [];
                    this.selectData.forEach((item, index) => {
                        ids.push(item.id);
                    })
                    this.$api.supplier.remove({ supplier_id: ids }).then(res => {
                        if (res.code == 200) {
                            this.$Message.success(res.message);
                            this.getTableList();
                        }
                    });
                }
            });
        },
        getStaffTableList: function(id) {
            this.staffloading = true;
            this.$api.supplierstaff.list({'supplier_id': id}).then(res => {
                this.staffloading = false;
                if (res.code == 200) {
                    this.tableStafflist = res.result;
                    this.$Message.success(res.message);
                }
            });
            return;
        },
        showStaff:function (id) {
            this.showStaffModalStatus = !this.showStaffModalStatus;
            this.supplier_id = id;
            this.getStaffTableList(id);
        },
        // 添加员工
        showStaffCreateModel:function(){
            this.showStaffCreateStatus = !this.showStaffCreateStatus;
            this.supplierstaff = {
                supplier_id: this.supplier_id,
                staffname:'',
                phone:'',
                email:'',
                crypt:'',
                password:'',
                status: true
            };
        },
        createSupplierStaff:function(name){
            this.$refs[name].validate((valid) => {
                if (valid) {
                    this.loading = true;
                    this.$api.supplierstaff.create(this.supplierstaff).then(res => {
                        if (res.code == 200) {
                            this.getStaffTableList(this.supplier_id);
                            this.showStaffCreateStatus = !this.showStaffCreateStatus;
                        }
                        this.loading = false;
                    }).finally(res => {
                        this.loading = false;
                    });
                } else {
                    this.$Message.error('请检查输入的信息是否正确！');
                    this.loading = false
                }
            })
        },
        // 修改员工
        showStaffEditModel:function(id){
            this.supplierstaff_id = id;
            this.loading = true;
            this.$api.supplierstaff.detail({supplier_staff_id:id}).then(res => {
                if (res.code == 200) {
                    this.supplierstaff = res.result
                    this.supplierstaff.password = '';
                    this.loading = false;
                }
            })
            this.showStaffEditStatus = !this.showStaffEditStatus;
        },
        editSupplierStaff:function(name){
            this.$refs[name].validate((valid) => {
                if (valid) {
                    this.loading = true;
                    this.supplierstaff.supplier_staff_id = this.supplierstaff_id
                    this.$api.supplierstaff.edit(this.supplierstaff).then(res => {
                        if (res.code == 200) {
                            this.getStaffTableList(this.supplier_id);
                            this.showStaffEditStatus = !this.showStaffEditStatus;
                        }
                        this.loading = false;
                    }).finally(res => {
                        this.loading = false;
                    });
                } else {
                    this.$Message.error('请检查输入的信息是否正确！');
                    this.loading = false
                }
            })
        },
        removeStaff:function(index,id){
            // 弹出确认框
            this.$Modal.confirm({
                title: '警告',
                content: '<p>此操作不可恢复，三思而后行...</p>',
                onOk: () => {
                    this.$api.supplierstaff.remove({ supplier_staff_id: [id] }).then(res => {
                        if (res.code == 200) {
                        this.$Message.success(res.message);
                        this.tableStafflist.splice(index, 1);
                        }
                    });
                }
            });
        },
        showRelationModel:function(id){
            this.loading = true;
            this.stafftenant.supplier_staff_id = id;
            this.showRelationStatus = !this.showRelationStatus;
            this.$api.supplierstaff.tenant({'supplier_staff_id':id}).then(res => {
                this.loading = false;
                if (res.code == 200) {
                    this.tenantlist = res.result.all;
                    this.stafftenant.tenant_id = res.result.list;
                }
            });
        },
        relationTenant:function(){
            this.loading = true;
            this.$api.supplierstaff.relation(this.stafftenant).then(res => {
                if (res.code == 200) {
                    this.showRelationStatus = !this.showRelationStatus;
                }
                this.loading = false;
            }).finally(res => {
                this.loading = false;
            });
        },
    }
}
</script>
